<template>
  <div class="collapse">
    <el-icon v-if="collapse" @click="foldExpandClick">
      <Expand />
    </el-icon>
    <el-icon v-else @click="foldExpandClick">
      <Fold />
    </el-icon>
  </div>
</template>

<script setup>
import { useFoldMenuStore } from "@/store/foldMenu";
import { storeToRefs } from "pinia";
const foldMenu = useFoldMenuStore();
const { collapse } = storeToRefs(foldMenu);
const foldExpandClick = () => {
  collapse.value = !collapse.value;
  foldMenu.setCollapse(collapse.value);
};
defineOptions({
  name: "Collapse",
});
</script>

<style lang="scss" scoped>
.collapse {
  font-size: 20px;
  margin-right: 24px;

  .el-icon {
    width: 40px;
    height: 40px;
    svg {
      height: 24px;
      width: 24px;
    }
  }
}
</style>
